<template>
  <div class="echartsBox">
    <div class="centerTitle">
      <h1>产量统计数据</h1>
      <ul>
        <li>
          <span>日产量：</span>
          <b>{{ obj.dayNum }}</b>
        </li>
        <li>
          <span>月产量：</span>
          <b>{{ obj.monthNum }}</b>
        </li>
      </ul>
    </div>
    <div
      v-if="obj.dayNum > 0 || obj.monthNum > 0"
      id="proLine"
      class="allWidthHeight"
    />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: "",
      obj: {},
    };
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize();
    },
    /* 获取产量统计数据 */
    async getWorkStat() {
      const res = await this.$axios.get("/board/operations/workStat");
      if (res?.data.code === 200) {
        this.obj = res.data.data;
        setTimeout(async () => {
          this.setProLine(res.data.data);
        }, 500);
      }
    },
    /* 产量统计数据echarts */
    setProLine(data) {
      if (data.workList.length > 0) {
        let time = [
          "10-22",
          "10-21",
          "10-20",
          "10-19",
          "10-18",
          "10-17",
          "10-16",
          "10-15",
          "10-14",
          "10-13",
          "10-12",
          "10-11",
          "10-10",
          "10-09",
          "10-08",
          "10-07",
          "10-06",
          "10-05",
          "10-04",
        ];
        let num = [];
        data.workList.forEach((item) => {
          // time.push(item.workDay);  todo临时去掉 后面得恢复
          num.push(item.workNum);
        });
        const option = {
          grid: {
            left: "10%", // 距离左侧的距离
            right: "2%", // 距离右侧的距离
            top: "25%", // 距离顶部的距离
            bottom: "18%", // 距离底部的距离
          },
          legend: {
            data: ["产量"],
            right: "0",
            left: "0",
            top: "15px",
            // width: '100px',
            textStyle: {
              fontSize: "14px",
              color: "#fff", // 这里设置图例的字体颜色为红色
            },
            itemWidth: 15, // 设置图例标记的图形宽度
            itemHeight: 15, // 设置图例标记的图形高度
          },
          xAxis: [
            {
              splitLine: { show: false },
              axisPointer: {
                type: "shadow",
              },
              axisLine: {
                // 坐标轴 轴线
                lineStyle: {
                  color: "#fff",
                  width: 1,
                  type: "solid",
                },
              },
              axisLabel: {
                color: "#fff",
                formatter: "{value}",
                // interval: 0, // 代表显示所有x轴标签显示
                rotate: 50,
                fontSize: 10,
              },
              axisTick: {
                show: false,
              },
              type: "category",
              data: time,
            },
          ],
          yAxis: [
            {
              splitLine: { show: true },
              axisLine: {
                show: false,
                // 坐标轴 轴线
                lineStyle: {
                  color: "#fff",
                  width: 1,
                  type: "solid",
                },
              },
              axisLabel: {
                color: "#fff",
              },
              axisTick: {
                show: false,
              },
              type: "value",
            },
          ],
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              name: "产量",
              type: "line",
              data: num,
              label: {
                show: true, // 显示数值
                position: "top", // 在顶部显示
                color: "#fff",
                formatter: function (params) {
                  // 自定义标签的显示内容
                  return params.value; // 显示数值
                },
              },
              itemStyle: {
                borderColor: "rgba(0,0,0,0)", // 去掉标记点的边框
                borderWidth: 0, // 去掉标记点的边框
              },
              lineStyle: {
                color: "#3FADFE", //
                width: 3, // 线条宽度
              },
              // smooth: true,
              symbol: "none", // 设置为 'none' 去掉线上的点
            },
          ],
        };
        if (
          this.myChart != null &&
          this.myChart !== "" &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose(); // 销毁
        }
        this.myChart = echarts.init(document.getElementById("proLine"));
        this.myChart.clear();
        this.myChart.setOption(option, true);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.centerTitle {
  height: 40px;
  h1 {
    font-size: 18px;
    color: #fff;
    margin: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }
  ul {
    position: absolute;
    right: 0;
    top: 15px;
    li {
      color: #fff;
      width: 150px;
      float: left;
      padding-right: 10px;
      text-align: right;
    }
    li:first-child {
      b {
        color: #09e2f8;
      }
    }
    li:last-child {
      b {
        color: #ec7c22;
      }
    }
  }
}
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: calc(93% - 30px);
  position: relative;
}
</style>
